@import './common/var.scss';
.card{
  h4{
    margin:0;
    padding:0;
  }
  flex: 0 0 30%;
  margin-left: 2.2%;

  .el-card{
    margin-top: 20px;
    .el-card__body{
      display: flex;
      color: $--card-list-card-body-color;
      .el-icon-picture{
        font-size: $--card-list-card-body-piciton-icon-font-size;
      }
      img{
        width: 100px;
        height: 100px;
      }
      .right{
        flex: 1;
        margin-left: 10%;
        padding-top: 8px;
        box-sizing: border-box;
        .title{
          width: 40%;
          color: $--card-list-card-body-title-color;
          font-weight: $--font-weight-primary;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
        }
        .description{
          width: 70%;
          color: $--card-list-card-body-description-color;
          font-size: $--font-size-base;
          margin: 22px 0 8px 0;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
        }
        .detail{
          color:$--card-list-card-body-detail-color;
          font-size: $--font-size-base;
          cursor: pointer;
          &:hover{
            color: $--card-list-card-body-detail-hover-color;
          }
        }
      }
    }
    .el-card__footer{
      border-top: $--border-width-base $--border-style-base $--card-list-card-footer-border-color;
      padding: 18px 20px;
      box-sizing: border-box;
      .el-icon-edit{
        float: right;
        cursor: pointer;
        color: $--card-list-card-footer-edit-icon-color;
        &:hover{
          color: $--card-list-card-footer-edit-icon-hover-color;
        }
      }
      .more{
        float: right;
        margin: 0 20px 20px 20px;
        cursor: pointer;
        color: $--card-list-card-footer-more-color;
        &:hover{
          color: $--card-list-card-footer-more-hover-color;
        }
      }
      .dot{
        width: 10px;
        height: 10px;
        border-radius: 50%;
        background-color: $--card-list-card-footer-dot-background-color;
        float: left;
        margin-top: 4px;
      }
      .status{
        float: left;
        font-size: $--font-size-base + 1;
        margin: -0 8px 0 8px;
      }
      .time{
        font-size: $--font-size-base;
        color: $--card-list-card-footer-time-color;
        float: left;
        margin-left: 2%;
      }
    }
  }
}

.card-list{
  position: relative;
  padding:40px 0;
  display: flex;
  justify-content:flex-start;
  flex-wrap: wrap;
  .total{
    position: absolute;
    top: 10px;
    left: 1.4%;
    color: $--card-list-total-color;
    font-size: $--font-size-base;
    margin-left: 0.6%;
  }
  .box-card{
    width: 30%;
    margin-left: 2%;
    box-sizing: border-box;
    display: flex;
    justify-content: center;
    float: left;
    height: $--card-list-box-height;
    .el-icon-plus{
      font-size: $--card-list-plus-font-size;
      color: $--card-list-plus-color;
      text-align: center;
      cursor: pointer;
      line-height: $--card-list-plus-line-height;
    }
  }
  .loadMore{
    width: 94.4%;
    margin: 24px 0 0 2.2%;
  }
  .allLoaded{
    width: 94.4%;
    margin: 24px 0 0 2.2%;
    text-align: center;
    color: $--card-list-all-loaded-color;
  }
}
